<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="案件名称" prop="caseName">
                    <el-input class="w-[280px]" v-model="queryParams.caseName" />
                </el-form-item>

                <el-form-item label="客户名称" prop="customerDocumentNumber">
                    <el-input class="w-[280px]" v-model="queryParams.customerDocumentNumber" />
                </el-form-item>

                <el-form-item label="提案号" prop="referenceNumber">
                    <el-input class="w-[280px]" v-model="queryParams.referenceNumber" />
                </el-form-item>

                <el-form-item label="我方文号" prop="ourRef">
                    <el-input class="w-[280px]" v-model="queryParams.ourRef" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams = true">批量移交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists" stripe>
                <el-table-column type="selection" width="55" />
                <el-table-column label="案件名称" prop="caseName" min-width="100" />
                <el-table-column label="案件类型" prop="caseType" min-width="100" />
                <el-table-column label="业务类型" prop="businessType" min-width="100" />
                <el-table-column label="我方文号" prop="ourRef" min-width="100" />
                <el-table-column label="创建时间" prop="createTime" min-width="100" />
                <el-table-column label="创建人员" prop="creator" min-width="100" />
                <el-table-column label="代理机构" prop="agency" min-width="100" />
                <el-table-column label="客户名称" prop="proposalForm" min-width="100" />
                <el-table-column
                    label="当前流程"
                    prop="developmentCompletionDate"
                    min-width="100"
                />
                <el-table-column label="最后办理日期" prop="royaltyDate" min-width="100" />
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <el-dialog title="流程提交" v-model="resetParams">
            <el-tabs v-model="activeName">
                <el-tab-pane label="移交" name="first">
                    <el-form>
                        <el-form-item label="当前节点" prop="customerDocumentNumber">
                            <el-input v-model="queryParams.customerDocumentNumber" />
                        </el-form-item>

                        <el-form-item label="下一节点" prop="referenceNumber">
                            <el-input v-model="queryParams.referenceNumber" />
                        </el-form-item>

                        <el-form-item label="办理人员" prop="ourRef">
                            <el-select
                                class="flex-1"
                                v-model="queryParams.ourRef"
                                placeholder="请选择办理人员"
                            >
                                <el-option label="流程01" value="1" />
                                <el-option label="流程02" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="办理意见" prop="agency">
                            <el-input v-model="queryParams.agency" />
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="流程信息" name="two">
                    <el-form>
                        <el-form-item label="流程类型" prop="customerDocumentNumber">
                            <el-input v-model="queryParams.customerDocumentNumber" />
                        </el-form-item>

                        <el-form-item label="部门信息" prop="referenceNumber">
                            <el-input v-model="queryParams.referenceNumber" />
                        </el-form-item>

                        <el-form-item label="提交至退回节点" prop="ourRef">
                            <el-select
                                class="flex-1"
                                v-model="queryParams.ourRef"
                                placeholder="请选择办理人员"
                            >
                                <el-option label="是" value="1" />
                                <el-option label="否" value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="更新时间" prop="agency">
                            <el-date-picker
                                class="flex-1 !flex"
                                v-model="queryParams.agency"
                                type="datetime"
                                clearable
                                value-format="YYYY-MM-DD hh:mm:ss"
                                placeholder="请选择更新时间"
                            />
                        </el-form-item>
                    </el-form>
                    <el-table
                        class="mt-4"
                        size="large"
                        v-loading="pager.loading"
                        :data="pager.lists"
                    >
                        <el-table-column label="节点名称" prop="agency" min-width="100" />
                        <el-table-column label="人员类型" prop="proposalForm" min-width="100" />
                        <el-table-column
                            label="审核人员"
                            prop="developmentCompletionDate"
                            min-width="100"
                        />
                        <el-table-column label="下一步流程" prop="royaltyDate" min-width="100" />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup name="case">
import { caseDelete, caseLists } from '@/api/case'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
const showEdit = ref(false)
const queryParams = reactive({
    caseName: '',
    caseType: '',
    businessType: '',
    putinType: '',
    undertakingDepartment: '',
    conductor: '',
    taxRate: '',
    costType: '',
    cost: '',
    contributionPool: '',
    ownershipDistribution: '',
    haveCase: '',
    designatedCountry: '',
    brandType: '',
    classQuantity: '',
    quantity: '',
    officialFee: '',
    agencyFee: '',
    hirdPartyPayment: '',
    signedAmount: '',
    invoiceValue: '',
    fundsReceived: '',
    paidupDateStart: '',
    paidupDateEnd: '',
    planNumber: '',
    caseStatus: '',
    caseLink: '',
    remark: '',
    caseNameid: '',
    businessTypeid: '',
    undertakingDepartmentid: '',
    ownershipDistributionid: '',
    costTypeid: '',
    correlationTypeid: '',
    isRegister: '',
    isInvalid: '',
    isExistingcase: '',
    isPapernotice: '',
    customerDocumentNumber: '',
    copyrightType: '',
    caseFlow: '',
    countryOfOrigin: '',
    agency: '',
    proposalForm: '',
    isMaterials: '',
    isFund: '',
    initialPeriod: '',
    referenceNumber: '',
    contractNumber: '',
    budget: '',
    author: '',
    homeLocation: '',
    softwareAbbreviation: '',
    versionNumber: '',
    softwareWorkDescription: '',
    developmentCompletionDateStart: '',
    developmentCompletionDateEnd: '',
    publishedStatus: '',
    hardwareEnvironment: '',
    softwareEnvironment: '',
    programmingLanguage: '',
    sourceQuantity: '',
    functionAndArt: '',
    handlingInformation: '',
    principalDatesStart: '',
    principalDatesEnd: '',
    customerTermStart: '',
    customerTermEnd: '',
    internalWearLifeStart: '',
    internalWearLifeEnd: '',
    isStateCompensation: '',
    click: '',
    partOwner: '',
    todonote: '',
    manageDateStart: '',
    manageDateEnd: '',
    countType: '',
    numberOfPoints: '',
    addtotalstatepoint: '',
    royaltyDateStart: '',
    royaltyDateEnd: '',
    workPoints: '',
    creator: '',
    chargeType: '',
    currency: '',
    sum: '',
    advancePaymentDateStart: '',
    advancePaymentDateEnd: '',
    paymentRequestNumber: '',
    requestedDateStart: '',
    requestedDateEnd: '',
    accountsDateStart: '',
    accountsDateEnd: '',
    invoiceNumber: '',
    chargeName: '',
    chargeDepict: '',
    chargeDepictfine: '',
    extendedAmount: '',
    discountRate: '',
    count: '',
    parities: '',
    collectingCompanyAccount: '',
    collectionStatus: '',
    accountDetails: '',
    sltStart: '',
    sltEnd: '',
    externalBillingNumber: '',
    externalBillingDateStart: '',
    externalBillingDateEnd: '',
    beddingCondition: '',
    handOver: '',
    expenseNote: '',
    reductionType: '',
    actualCurrency: '',
    officialDeadlineStart: '',
    officialDeadlineEnd: '',
    ourRef: '',
    relevantCaseName: '',
    correlationType: '',
    userId: '',
    userName: '',
    updateUserId: '',
    updateUserName: ''
})

const { pager, getLists, resetPage } = usePaging({
    fetchFun: caseLists,
    params: queryParams
})

const resetParams = ref(false)
const activeName = ref('first')

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await caseDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}

getLists()
</script>
